<template>
  <div class="container">
    <el-row>
      <el-col class="container-header flex-center">
        <span class="container-header-title">情绪识别系统</span></el-col>
    </el-row>
    <el-row class="flex-row">
      <!-- 左-->
      <el-col :span="6" class="container-col">
        <el-row>
          <div class="container-col-echarts-box">
            <div class="container-col-echarts-box-text">设备状态统计</div>
            <div class="container-col-echarts-box-tu flex-center flex-column">
              <el-row class="container-col-echarts-box-tu-row flex-center">
                <el-col :span="8" class="flex-center">
                  <div class="container-col-echarts-box-tu-imgBox flex-center">
                    <img src="~@/assets/sxt-zc.png" class="container-col-echarts-box-tu-imgBox-img"/>
                  </div>
                </el-col>
                <el-col :span="8" class="container-col-echarts-box-tu-zcText">设备正常</el-col>
                <el-col :span="8" class="container-col-echarts-box-tu-zcText" style="font-size: 0.29rem;">100<span
                  style="font-size: 0.16rem"
                >  个</span></el-col>
              </el-row>
              <el-row class="container-col-echarts-box-tu-row flex-center" style="margin-top: -0.4rem;">
                <el-col :span="8" class="flex-center">
                  <div class="container-col-echarts-box-tu-imgBox flex-center">
                    <img src="~@/assets/sxt-lx.png" class="container-col-echarts-box-tu-imgBox-img"/>
                  </div>
                </el-col>
                <el-col :span="8" class="container-col-echarts-box-tu-ycText">设备离线</el-col>
                <el-col :span="8" class="container-col-echarts-box-tu-ycText" style="font-size: 0.29rem;">100<span
                  style="font-size: 0.16rem"
                >  个</span></el-col>
              </el-row>
            </div>
          </div>
        </el-row>
        <el-row>
          <div class="container-col-echarts-box">
            <span class="container-col-echarts-box-text">关注度统计</span>
            <div class="container-col-echarts-box-tu">
              <Bar id="barChart" style="width:4.3rem;height: 2.4rem;" :chartData="barObj"/>
            </div>
          </div>
        </el-row>
        <el-row>
          <div class="container-col-echarts-box">
            <span class="container-col-echarts-box-text">地点预警信息</span>
            <div class="container-col-echarts-box-tu" style="margin-left: 7px;">
              <el-row class="scroll_box scroll_box_row">
                <el-col :span="8">地点</el-col>
                <el-col :span="8">预警等级</el-col>
                <el-col :span="8">预警日期</el-col>
              </el-row>
              <VueSeamlessScroll class="scroll_box" :data="placeWarningList" :class-option="defineScroll">
                <el-row v-for="(item, index) in placeWarningList" :key="index" class="scroll_box_row"
                        :style="{ backgroundColor: index % 2 === 0 ? '#1E3A8A' : '' }"
                >
                  <el-col :span="8">{{ item.address }}</el-col>
                  <el-col :span="8">{{ item.grade }}</el-col>
                  <el-col :span="8">{{ item.time }}</el-col>
                </el-row>
              </VueSeamlessScroll>
            </div>
          </div>
        </el-row>
      </el-col>
      <!-- 中-->
      <el-col :span="11" class="container-col" style="margin: 0.32rem 0.3rem 0 0.3rem;">
        <el-row class="container-col-top">
          <el-col :span="8" class="container-col-top-item">
            <el-row class="container-col-top-item-cjRow flex-center" style="margin-top: 0.2rem;">采集量</el-row>
            <el-row class="container-col-top-item-cjRow">250</el-row>
          </el-col>
          <el-col :span="8" class="container-col-top-item">
            <el-row class="container-col-top-item-yjRow flex-center" style="margin-top: 0.2rem;">预警数</el-row>
            <el-row class="container-col-top-item-yjRow">128</el-row>
          </el-col>
          <el-col :span="8" class="container-col-top-item">
            <el-row class="container-col-top-item-gyRow flex-center" style="margin-top: 0.2rem;">干预数</el-row>
            <el-row class="container-col-top-item-gyRow">88</el-row>
          </el-col>
        </el-row>
        <el-row>
          <el-col class="container-col-center">
            <AMap ref="AMap"/>
          </el-col>
        </el-row>
        <el-row>
          <div class="container-col-echarts-box">
            <span class="container-col-echarts-box-bottom">地点关注度趋势</span>
            <div class="container-col-echarts-box-tu">
              <Curve id="curveChart" style="width:8.3rem;height: 2rem;" :chartData="curveObj"/>
            </div>
          </div>
        </el-row>
      </el-col>
      <!-- 右-->
      <el-col :span="6" class="container-col">
        <el-row>
          <div class="container-col-echarts-box">
            <span class="container-col-echarts-box-text">预警占比</span>
            <div class="container-col-echarts-box-tu">
              <Pie id="pieChart" style="height: 2rem" :chartData="pieObj"/>
            </div>
          </div>
        </el-row>
        <el-row>
          <div class="container-col-echarts-box">
            <span class="container-col-echarts-box-text">五维情绪</span>
            <div class="container-col-echarts-box-tu">
              <Radar id="radarChart" style="width:4.6rem;height: 2.4rem;" :chartData="radarObj"/>
            </div>
          </div>
        </el-row>
        <el-row>
          <div class="container-col-echarts-box">
            <span class="container-col-echarts-box-text">个人预警信息</span>
            <div class="container-col-echarts-box-tu" style="margin-left: 7px;">
              <el-row class="scroll_box scroll_box_row">
                <el-col :span="6">姓名</el-col>
                <el-col :span="6">年级/班级</el-col>
                <el-col :span="6">预警等级</el-col>
                <el-col :span="6">预警日期</el-col>
              </el-row>
              <VueSeamlessScroll class="scroll_box" :data="personnelWarningList" :class-option="defineScroll">
                <el-row v-for="(item, index) in personnelWarningList" :key="index" class="scroll_box_row"
                        :style="{ backgroundColor: index % 2 === 0 ? '#1E3A8A' : '' }"
                >
                  <el-col :span="6">{{ item.name }}</el-col>
                  <el-col :span="6">{{ item.class }}</el-col>
                  <el-col :span="6">{{ item.grade }}</el-col>
                  <el-col :span="6">{{ item.time }}</el-col>
                </el-row>
              </VueSeamlessScroll>
            </div>
          </div>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Bar from '@/components/echarts/bar.vue'
import Curve from '@/components/echarts/curve.vue'
import Radar from '@/components/echarts/radar.vue'
import Pie from '@/components/echarts/pie.vue'
import VueSeamlessScroll from 'vue-seamless-scroll'
import AMap from '@/components/AMap.vue'

export default {
  name: 'PanoramicHall',
  components: {
    Bar, Curve, Radar, Pie, VueSeamlessScroll, AMap
  },
  computed: {
    defineScroll() {
      return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 6, // 开始无缝滚动的数据量
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleHeight: 0,
        // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        singleWidth: 0,
        waitTime: 0 // 单步运动停止的时间(默认值1000ms)
      }
    }
  },
  data() {
    return {
      barObj: {},
      curveObj: {},
      radarObj: {},
      pieObj: {},
      personnelWarningList: [],
      placeWarningList: [],
      chartData: {
        points: [
          {
            name: '食堂',
            unAttention: 12,
            lowAttention: 22,
            moderateAttention: 33,
            highAttention: 51,
            longitude: 120.497328,
            latitude: 30.049547
          },
          {
            name: '教室',
            unAttention: 12,
            lowAttention: 22,
            moderateAttention: 53,
            highAttention: 21,
            longitude: 120.497328,
            latitude: 30.050000
          },
          {
            name: '操场',
            unAttention: 12,
            lowAttention: 22,
            moderateAttention: 43,
            highAttention: 21,
            longitude: 120.497018,
            latitude: 30.050300,
            value: 30
          }
        ]
      }
    }
  },
  mounted() {
    this.$refs.AMap.init(this.chartData)
    this.barObj = {
      legendList: ['无关注度', '低关注度', '中关注度', '高关注度'],
      colorList: ['#A8E6A1', '#ADD8E6', '#FFA500', '#FF4500'],
      typeList: ['bar'],
      unit: '个',
      top: '58px',
      left: '18px',
      right: '8px',
      legendTop: '15px',
      legendLeft: '65px',
      legendRight: '10px',
      newLeft: '8',
      topShow: false, // 是否显示柱子上方数据
      xAxis: ['2024-11-11', '2024-11-12', '2024-11-13', '2024-11-14'],
      seriesData: [[12, 13, 15, 17], [22, 13, 45, 17], [12, 43, 15, 7], [12, 43, 15, 7]]
    }
    this.curveObj = {
      legendList: ['食堂', '教室', '走廊', '宿舍', '操场'],
      colorList: ['#A8E6A1', '#ADD8E6', '#FFA500', '#FF4500'],
      typeList: ['line'],
      unit: '',
      top: '48.33px',
      left: '18px',
      right: '8px',
      legendTop: '15px',
      legendLeft: '185px',
      legendRight: '20px',
      newLeft: '8',
      topShow: false, // 是否显示柱子上方数据
      smooth: true,
      xAxis: ['2024-11-11', '2024-11-12', '2024-11-13', '2024-11-14'],
      yAxisData: ['无关注度', '低关注度', '中关注度', '高关注度'],
      seriesData: [['无关注度', '低关注度', '高关注度', '中关注度'], ['中关注度', '无关注度', '高关注度', '低关注度'], ['低关注度', '中关注度', '无关注度', '高关注度'], ['无关注度', '高关注度', '中关注度', '低关注度']]
    }
    this.radarObj = {
      legendList: ['地点', '群体'],
      colorList: ['rgb(170, 230, 161,0.62)', 'rgb(255, 100, 0,0.62)'],
      typeList: ['radar'],
      unit: '',
      top: '58px',
      left: '18px',
      right: '0px',
      legendTop: '10px',
      // legendLeft: '385px',
      legendRight: '0px',
      newLeft: '8',
      topShow: false, // 是否显示柱子上方数据
      indicatorData: [
        { text: '悲伤', max: 100 },
        { text: '高兴', max: 100 },
        { text: '厌恶', max: 100 },
        { text: '平静', max: 100 },
        { text: '愤怒', max: 100 }
      ],
      seriesData: [[85, 90, 90, 95, 95], [95, 80, 95, 90, 93]]
    }
    this.pieObj = {
      legendList: ['无关注度', '低关注度', '中关注度', '高关注度'],
      colorList: ['#A8E6A1', '#ADD8E6', '#FFA500', '#FF4500'],
      typeList: ['pie'],
      unit: '',
      top: '58px',
      left: '18px',
      right: '8px',
      legendTop: '10px',
      legendLeft: '65px',
      legendRight: '10px',
      newLeft: '8',
      topShow: true, // 是否显示柱子上方数据
      seriesData: [12, 13, 15, 17]
    }
    this.placeWarningList = [
      {
        id: 1,
        address: '教室',
        grade: '高关注度',
        time: '2024-12-12'
      },
      {
        id: 2,
        address: '宿舍',
        grade: '中关注度',
        time: '2024-12-12'
      },
      {
        id: 3,
        address: '操场',
        grade: '高关注度',
        time: '2024-12-12'
      },
      {
        id: 4,
        address: '食堂',
        grade: '中关注度',
        time: '2024-12-12'
      },
      {
        id: 5,
        address: '门口',
        grade: '中关注度',
        time: '2024-12-12'
      }
    ]
    this.personnelWarningList = [
      {
        id: 1,
        name: '张三',
        class: '一年级（二班）',
        grade: '中关注度',
        time: '2024-12-12'
      },
      {
        id: 2,
        name: '张三',
        class: '一年级（二班）',
        grade: '中关注度',
        time: '2024-12-12'
      },
      {
        id: 3,
        name: '张三',
        class: '一年级（二班）',
        grade: '中关注度',
        time: '2024-12-12'
      },
      {
        id: 4,
        name: '张三',
        class: '一年级（二班）',
        grade: '中关注度',
        time: '2024-12-12'
      },
      {
        id: 5,
        name: '张三',
        class: '一年级（二班）',
        grade: '中关注度',
        time: '2024-12-12'
      },
      {
        id: 6,
        name: '张333三',
        class: '一年级（二班）',
        grade: '中关注度',
        time: '2024-12-12'
      }
    ]
  },
  methods: {
    to() {
      this.$router.push({ path: '/facialRegistration' })
    }
  }
}
</script>

<style lang="scss">
@import "./styles/index.scss";
</style>
